<template>
	<view>
		<uni-popup ref="popup" :type="type" background-color="#fff">
			<view class="popup-box">
				<view class="popup-header" v-if="isShowTitle">
					<view class="title">{{title}}</view>
					<view class="btn">
						<text @click="closePopup" style="margin-left: 30rpx;">取消</text>
						<text class="done" @click="savePopup" style="margin-right: 30rpx;">确定</text>
					</view>
				</view>
				<view v-if="showFilter">
					<input class="search-input" v-model="filterVal" type="text" placeholder="请输入"
						@input="inputFilter" />
				</view>
				<scroll-view class="popup-content" :scroll-y="true">
					<view v-for="(item,index) in arr" :key="index" class="popup-content-item"
						@click="itemClick(item,index)">
						<slot :item="item" :index="index">
							<text>{{item[labelKey] }}</text>
						</slot>
						<image v-if="!item.disabled" class="check-img" :src="getCheckImg(item)">
						</image>
					</view>
				</scroll-view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: [String, Array, Number]
			},
			// 弹窗标题
			title: {
				type: String,
				default: '请选择'
			},
			// 是否显示弹窗标题
			isShowTitle: {
				type: Boolean,
				default: true
			},

			// 是否能过滤 (列表上面的输入框是否显示)
			showFilter: {
				type: Boolean,
				default: true
			},

			// 过滤的关键字,默认是label 可传多个字段
			filterKeys: {
				type: Array,
				default: ['label']
			},

			// 绑定的label对应的key
			labelKey: {
				type: String,
				default: 'label'
			},
			// 绑定的value对应的key
			valueKey: {
				type: String,
				default: 'value'
			},
			// 弹出方式 top left right bottom
			type: {
				type: String,
				default: 'bottom'
			},
			// 是否多选
			multiple: {
				type: Boolean,
				default: false
			},
			// 数组选项
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		watch: {
			list: {
				handler(val) {
					this.arr = val || []
					this.allList = val || []
				},
				deep: true,
				immediate: true
			},
			value: {
				handler(val) {
					this.arr = this.arr.map(o => {
						// 多选
						if (this.multiple) {
							o.checked = val?.includes(o[this.valueKey])
						} else {
							o.checked = o[this.valueKey] == val
						}
						return o
					})
				},
				deep: true,
				immediate: true
			},
		},

		data() {
			return {
				filterVal: '',
				arr: [],
				allList:[]
			};
		},
		methods: {
			// 过滤
			inputFilter() {
				this.arr = this.allList.filter(m => {
					let tempStr = ''
					this.filterKeys.map(n => {
						let str = m?.[n] ?? ''
						tempStr = tempStr + str
					})
					return tempStr.includes(this.filterVal)
				})
			},

			getCheckImg(item) {
				let imageName = ''
				// 多选
				if (this.multiple) {
					imageName = item?.checked ? 'checkbox-icon' : 'no-checkbox-icon'
				} else {
					imageName = item?.checked ? 'check-icon' : 'no-check-icon'
				}
				return `../../static/${imageName}.png`
			},

			// 选项点击
			itemClick(item, index) {
				this.$emit('itemClick',item,index)
				if (item.disabled) {
					return
				}
				this.arr = this.arr?.map((o, i) => {
					// 多选
					if (index === i) {
						o.checked = !o.checked
					} else {
						// 单选需要将其它选项设为false
						if (!this.multiple) {
							o.checked = false
						}
					}
					return o
				})
			},

			// 打开弹窗
			open() {
				this.$emit('open')
				this.$refs.popup.open()
			},

			// 关闭弹窗
			closePopup() {
				this.$emit('close')
				this.$refs.popup.close()
			},

			//  选项保存
			savePopup() {
				let filterArr = this.arr.filter(o => o.checked) || []
				let vals = filterArr.map(o => o[this.valueKey]) || []
				let val = this.multiple ? vals : vals.join('')
				this.$emit('input', val)
				this.$emit('save', val, filterArr)
				this.closePopup()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-img {
		width: 30rpx;
		height: 30rpx;
	}

	.popup-box {
		height: 80vh;

		.popup-header {
			display: flex;
			align-items: center;
			height: 100rpx;
			position: relative;
			border-bottom: solid 1rpx #F0F0F0;

			.title,
			.btn {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 30rpx;
			}

			.title {
				justify-content: center;
				font-weight: bold;
				color: #000000;
			}

			.btn {
				justify-content: space-between;

				.done {
					font-weight: 400;
					color: #1890FF;
					flex-shrink: 0;
				}
			}
		}

		.search-input {
			border: solid 1rpx #DDDDDD;
			padding: 20rpx;
			margin: 20rpx 30rpx 0 30rpx;
			border-radius: 8rpx;
		}

		.popup-content {
			height: calc(80vh - 200rpx);

			.popup-content-item {
				margin: 0 30rpx;
				padding: 24rpx 0;
				display: flex;
				align-items: center;
				border-bottom: solid 1rpx #F0F0F0;
				justify-content: space-between;
			}
		}
	}
</style>